<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识点</title>
    <style>
        .box {
            /* 鼠标变成小手 */
            cursor: pointer;
            /* 外边框 轮廓 */
            outline: none;
            /* 默认不显示 */
            display: none;
            /* 垂直方向对齐方式 */
            vertical-align: middle;
            /* 行高  文字垂直居中*/
            line-height: 30px;
            /* 文字水平居中*/
            text-align: center;
            /* 去除垂直方向空隙 */
            vertical-align: top;
            /* 清除a标签的下划线 */
            text-decoration: none;
            /* 清除表单每行前的黑点 */
            list-style: none;
            /* 设置图片默认显示的位置 */
            background-position: 0 0;
            /* 不让用户修改文本域大小 */
            resize: none;
            outline: none;
            /* 行内元素去除空隙 父元素font-size: 0;  子元素设置 font-size: 文字大小;*/
            font-size: 0;
        }
    </style>
</head>

<body>
    <script>
        //缓动公式
        var target = 0  //目标值
        var leader = 0  //步长
        function fn() {
            leader = leader + (target - leader) / 10
            //要动的元素.style.left = leader + 'px'
        }
        //箭头函数 item当前对象  index下标
        imgs.forEach((item, index) => {//遍历
        })
        // 模拟JQuery
        function $(select) {
            return document.querySelectorAll(select)
        }
        //定时器 一直执行  fn（）方法
        setInterval(fn, 30)
        //定时器 执行一次  fn（）方法
        setTimeout(fn, 30)
        /* 鼠标事件*/
        // onclick  单击
        // ondblclick  双击
        // onmouseover 移动鼠标
        // onmouseout  移开鼠标
        // onmousedown  按下鼠标按键 
        // onmouseover  移入
        // onmouseleave  移出元素时触发
        // onload  浏览器已完成页面的加载
        /* 表单事件*/
        // onblur  元素失去焦点时触发
        // onfocus  元素获取焦点时触发
        // onchange  表单元素的内容改变时触发
        /*  键盘事件*/
        // onkeydown  按下键盘按键
        // onkeyup  松开按键
        // onkeypress 按下字符键


        //     offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
        // offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
        // clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
        // clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
        // style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
        // style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
        // scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
        // scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
        // 1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；
        // 2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
        // 3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，
        // 如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

        //     当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）
        // clientX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；
        // clientY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  不随滚动条滚动而改变；
        // pageX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  随滚动条滚动而改变；
        // pageY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变；
        // screenX     鼠标相对于显示器屏幕左上角x轴的坐标；  
        // screenY      鼠标相对于显示器屏幕左上角y轴的坐标；  
        // offsetX        鼠标相对于事件源左上角X轴的坐标
        // offsetY        鼠标相对于事件源左上角Y轴的坐标
    </script>
    <div class="box"></div>
</body>

<ml>